<template>
  <div class="ek-page">
    <el-tabs v-model="code" class="config-tabs" @tab-click="handleClick">
      <el-tab-pane label="基础配置" name="CONFIG_GROUP_BASE"> </el-tab-pane>
      <el-tab-pane label="后台配置" name="CONFIG_GROUP_BACKEND">
        <el-form v-if="list.length" label-width="160px">
          <template v-for="item in list" :key="item.config_key">
            <el-form-item
              :label="item.config_name"
              v-if="item.config_type == 'radio'"
            >
              <ekRadio
                v-model="form[item.config_key]"
                :options="item.options"
              />
              <ekTip
                :content="item.config_remarks"
                v-if="item.config_remarks"
              />
            </el-form-item>
            <el-form-item
              :label="item.config_name"
              v-else-if="item.config_type == 'string'"
            >
              <ekInput v-model="form[item.config_key]" />
              <ekTip
                :content="item.config_remarks"
                v-if="item.config_remarks"
              />
            </el-form-item>
          </template>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { defineComponent, onMounted, getCurrentInstance, ref } from "vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekTip from "@/components/business/ekTip/index.vue";
import { getDimensionByCode } from "@/utils/sys.js";
defineComponent({
  name: "config-index",
});
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;
const code = ref("CONFIG_GROUP_BACKEND");
const list = ref([]);
const form = ref({});
const init = () => {
  $http
    .get(`admin/config/getConfigByGroup?authCode=FUNCTION_CONFIG`, {
      params: {
        code: code.value,
      },
    })
    .then((res) => {
      if (res.status === "success") {
        list.value = res.data.list;
        if (res.data.list.length > 0) {
          res.data.list.forEach((item) => {
            form.value[item.config_key] = item.config_value;
          });
        }
      }
      console.log(res, "ggggggggggg");
    });
};
const handleClick = (tab, event) => {
  code.value = tab.props.name;
  init();
};

onMounted(async () => {
  init();
});
</script>
<style scoped lang="scss">
.config-tabs {
  padding: 0 10px;
}
</style>
